<template>
    <!-- 路由缓存 -->
    <div class="wangwang_ulTaView">
        <div class="scop_wawang">
            <ul class="Tates">
                <li @click="getNavgater(i.path)" class="list-item" :class="isRouters(i.path)" v-for=" i  in  listRouter"
                    :key="i.name">
                    <a-dropdown trigger="contextmenu" v-if="i.path !== '/home'">
                        <div>
                            {{ $t(i.meta.title) }}
                            <close-outlined v-if="i.meta.title !== '首页'" class="tetxsiocn"
                                @click.stop="delRouterSession(i)" />
                        </div>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item>
                                    <a href="javascript:;" @click="reloads">
                                        <RedoOutlined />
                                        刷新
                                    </a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:;" @click="RSclose(i)">
                                        <CloseOutlined />
                                        关闭
                                    </a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:;" @click="removes(i)">关闭其他</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:;" @click="clears">全部关闭</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:;" @click="fullscreen(i)">当前页全屏</a>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                    <div v-else>
                        {{ $t(i.meta.title) }}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup  name="wangwangRoute" lang="ts">
import { useRoute, useRouter, RouteRecordRaw } from 'vue-router'
import { Session } from '/@/units/Store'
import { DataViewState } from '/@/stores/RouterView'
import { UseStateCode } from '/@/Hooks/useState'
import { RouterSession } from '/@/stores/RouterSrore'
import { CloseOutlined, RedoOutlined } from '@ant-design/icons-vue'
import { storeToRefs } from 'pinia'
const DataView = DataViewState()
const { ThemeConfig } = storeToRefs(DataView)
const router = useRouter()
const route = useRoute()

// 获取缓存路由
const rouSession = RouterSession()
// 跳转路由
const getNavgater = (path: string): void => {
    router.push(path)
}
const isRouters = (routepath: string): string => {
    if (routepath === route.fullPath) {
        return `${ThemeConfig.value.tagViewValue} actives`
    }
    return ThemeConfig.value.tagViewValue
}

const delRouterSession = (row: any): void => {
    let lisRouterS = Session.get('RouterslistSeeion') || []
    lisRouterS = lisRouterS.filter((v: any) => v.path !== row.path)
    rouSession.RouterSessionlist = lisRouterS
    Session.set('RouterslistSeeion', lisRouterS)
}
const {
    reloads,
    RSclose,
    removes,
    clears,
    fullscreen,
    listRouter
} = UseStateCode()
</script>

<style scoped lang="scss">
.wangwang_ulTaView {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: var(--wang-bgcolor);
    width: 100%;
    overflow: hidden;
    position: relative;

    .scop_wawang {
        max-width: 100%;
        overflow: hidden;
        transition: all 0.3s;

        &:hover {
            overflow-x: auto;
            overflow-y: hidden;
        }
    }

    .Tates {
        display: flex;
        height: 100%;
        align-items: center;
        box-sizing: border-box;
        padding-top: 4px;

        .list-item {
            flex-shrink: 0;
            justify-content: center;
            display: flex;
            color: var(--wang-text-color);
            align-items: center;
            height: 25px;
            transition: all 0.4s;
            cursor: pointer;
            background-color: var(--wang_router-color);

        }

        .actives {
            background-color: var(--wang-color--parimary-bg);
            color: var(--wang-color-primary-lighter);
        }


    }
}
</style>